<template>
	<view class="box-notice" v-if="showNotice && notice.content" :style="'padding-bottom: ' + safeAreaHeight + 'rpx;'">
		<view class="pannel">
			<view class="bg"><image src="/static/images/bg_notice.jpg"></image></view>
				<view class="main">
					<view class="title">系统通知</view>
				<view class="content" v-html="notice.content"></view>
				<view class="footer">
					<button class="btn btn-refuse" @tap="doClose">知道了</button>
					<button class="btn btn-agree" @tap="toNotice">查看详情</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			notice: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				showNotice: false,
				safeAreaHeight: 0,
			}
		},
		mounted() {
			let now = this.getTime()
			let lastNotice = uni.getStorageSync('lastNotice')
			if (this.notice && (!lastNotice || now - lastNotice > 1)) {
				this.setData({
					safeAreaHeight: getApp().globalData.safeAreaHeight,
					showNotice: true
				})
			}
		},
		methods: {
			doClose() {
				this.showNotice = false
				let now = this.getTime()
				uni.setStorageSync('lastNotice', now)
			},
			toNotice() {
				this.doClose()
				uni.navigateTo({
					url: '/pages/article/article?type=notice'
				})
			},
			getTime() {
				return parseInt(new Date().getTime() / 1000)
			}
		}
	}
</script>

<style>
	.box-notice {
	    position: fixed;
	    width: 100%;
	    left: 0;
	    top: 0;
	    bottom: 110rpx;
	    right: 0;
	    z-index: 99;
	    background: rgba(0, 0, 0, 0.4);
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	.box-notice .pannel {
	    width: 85%;
	    background-color: #fff;
	    border-radius: 20rpx;
	    overflow: hidden;
	    z-index: 2;
	    position: relative;
	}
	.box-notice .pannel .bg {
	    position: relative;
	    width: 100%;
	    height: 200rpx;
	    z-index: 1;
	}
	.box-notice .pannel .bg image {
	    width: 100%;
	    height: 100%;
	}
	.box-notice .pannel .main {
	    margin-top: -200rpx;
	    position: relative;
	    z-index: 2;
	}
	.box-notice .title {
	    width: 100%;
		box-sizing: border-box;
		padding: 30rpx 50rpx 20rpx 50rpx;
		font-weight: bold;
		font-size: 36rpx;
		text-align: center;
	}
	.box-notice .btn-close {
		position: absolute;
		top: 0;
		right: 0;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box-notice .btn-close image {
	    width: 48rpx;
	    height: 48rpx;
	}
	.box-notice .content {
	    padding: 0 50rpx 30rpx 50rpx;
		line-height: 48rpx;
		font-size: 32rpx;
		color: #333;
		min-height: 120rpx;
		max-height: 720rpx;
		overflow: hidden;
		overflow-y: auto;
	}
	.box-notice .content img {
		max-width: 100% !important;
	}
	.box-notice .btn-link {
	    color: #1d8ccc;
	}
	.box-notice .footer {
	    text-align: center;
	    padding: 40rpx 40rpx 30rpx 40rpx;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	}
	.box-notice .btn {
	    margin: 0;
	    font-size: 30rpx;
	    border-radius: 44rpx;
	    width: 260rpx;
	    height: 80rpx;
	    line-height: 80rpx;
	}
	.box-notice .btn:active {
	    opacity: 0.6;
	}
	.btn-refuse {
	    color: #1b1c1c;
	    border: 1px solid #dae0e0 !important;
	    background: #fff;
	}
	.btn-agree {
	    color: #fff;
	    background: #04BABE;
	}
</style>